import {defineComponent, reactive, ref} from "vue";
import {CategoriesStore} from "@/stores/categories";
import {storeToRefs} from "pinia";
import "../home/css/index.css"
import "../home/comp/css/index.css"
import SearchFrom from "@/page/system/categories/comp/SearchForm";
import Pagination from "@/components/Pagination";
import {useRouter} from "vue-router";
export default defineComponent({
    setup(){
        const categories_store = CategoriesStore()
        const {categoriesList}  = storeToRefs(categories_store)
        const queryParams = reactive({
            pageNum: 1,
            pageSize: 10,
            is_user:true,
            categories_name: undefined,
            type_id: undefined,
            categories_title:undefined
        })
        const total = ref(0)
        const router = useRouter()
        const initList = async () => {
            const res = await categories_store.getCategoriesList(queryParams)
            total.value = res.total
        }
        const handleQuery = ()=>{
            initList()
        }
        const handleCurrentChange = (val) => {
            queryParams.pageNum = val
            initList()
        }

        const handleDetails = async (id) => {
            // 将该资讯的浏览量+1
            const code = await categories_store.updateInformationRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'categoryDetails', query: {id}})
            }
        }

        initList()

        return ()=>{
            const list = categoriesList.value.map(item => {
                return   <el-card body-style={ {padding: '0px',}}
                  style = {{
                      width : '100%',
                      marginBottom:'20px',
                  }}
                onClick={()=>{handleDetails(item.id)}}>
                    <div className="image">
                        <el-image style={{
                            width:'130px',
                            height:'130px',
                            borderRadius:'10px'
                        }} src={item.imgUrl} fit={'cover'} />
                    </div>
                    <div className="text">
                        <p>项目名称:{item.title}</p>
                        <p>项目类别:{item.type_info.type_name}</p>
                        <p>期望金额:{item.expected_amount}元</p>
                        <p>众筹金额:{item.amount_raised}元</p>
                        <p>发起人:{item.user_info.nick_name}</p>
                    </div>
                </el-card>
            })
            return <>
                <div className="container" style={{marginTop:"20px"}}>
                    <SearchFrom
                        queryParams={queryParams}
                        handleQuery={handleQuery}/>
                    <div className="categories-cont">
                        {list}
                    </div>
                    <Pagination
                        handleCurrentChange={handleCurrentChange}
                        total={total.value}
                    />
                </div>
            </>
        }
    }
})